import React from "react";
import { List, Checkbox, Tag } from "antd-mobile";
import { EditSOutline } from "antd-mobile-icons";
import styles from "../css/psg.module.css";
import { useNavigate, useSearchParams } from "react-router-dom";
function PsgItem(props) {
  const color = {
    成人票: "default",
    儿童票: "success",
    学生票: "warning",
  };
  let [sp] = useSearchParams();
  let nav = useNavigate();
  const edit = () => {
    // nav("/add", { state: props });
    nav("/add", {
      state: {
        p_type: props.p_type,
        name: props.name,
        c_type: props.c_type,
        card_no: props.card_no,
        phone: props.phone,
        id: props.id,
      },
    });
  };
  return (
    
    <List.Item
      prefix={<EditSOutline onClick={edit} />}
      description={
        <span className={styles.idcard}>身份证：{props.card_no}</span>
      }
      arrowIcon={
        sp.get("mode") === "choose" && (
          <Checkbox
            value={{
              name: props.name,
              idcard: props.card_no,
              ticketType: props.p_type,
            }}
          />
        )
      }
    >
      <div className={styles.username}>
        <span className={styles.name}>{props.name}</span>
        <Tag color={color[props.p_type]} fill="outline">
          {props.p_type}
        </Tag>
      </div>
    </List.Item>
  );
}

export default PsgItem;
